<template>
  <div class="edit_box">
    <el-scrollbar>
      <el-form
        ref="csForm"
        class="csForm"
        :model="pageData.formData"
        :rules="pageData.formRules"
        status-icon
        label-width="120px"
      >
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="参数编号：" prop="fParamCode">
              <el-input
                v-model="pageData.formData.fParamCode"
                placeholder="请输入参数编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="参数名称：" prop="fParamName">
              <el-input
                v-model="pageData.formData.fParamName"
                placeholder="请输入参数名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="来源：" prop="fParamFrom">
              <el-select
                v-model="pageData.formData.fParamFrom"
                placeholder="请选择来源"
                style="width: 100%"
                @change="selectParamFrom"
              >
                <el-option
                  v-for="item in pageData.csSource"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="来源值：" prop="fParamValue">
              <el-select
                v-model="pageData.formData.fParamValue"
                placeholder="请选择来源值"
                style="width: 100%"
                @change="selectParamValueID"
              >
                <el-option
                  v-for="item in pageData.csID"
                  :key="item.name"
                  :label="item.label"
                  :value="item.name"
                />
              </el-select> </el-form-item
          ></el-col>

          <el-col :span="24">
            <el-form-item label="来源值ID：" prop="fParamValueID">
              <el-input
                v-model="pageData.formData.fParamValueID"
                placeholder="自动填充"
                :disabled="!pageData.isAdd || pageData.isAdd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型：" prop="fParamType">
              <template></template>
              <el-select
                v-model="pageData.formData.fParamType"
                placeholder="请选择类型"
                style="width: 100%"
              >
                <el-option
                  v-for="item in pageData.csType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="录入人员：">
              <el-input
                v-model="pageData.formData.fFullName"
                autocomplete="off"
                placeholder="自动填充"
                :disabled="!pageData.isAdd || pageData.isAdd"
              />
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="录入时间：">
              <el-input
                v-model="pageData.formData.fCreatorTime"
                autocomplete="off"
                placeholder="自动填充"
                :disabled="!pageData.isAdd || pageData.isAdd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input
                v-model="pageData.formData.fRemark"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-button @click="onHandleCancel">取消</el-button>
        <el-button type="primary" @click="onHandleSure"> 提交 </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElLoading, ElMessage } from "element-plus";
// const lodash = require("lodash");

import {
  create_csinfo,
  select_csSourceFw,
  query_csinfodetails,
  update_csinfo,
} from "@/api/basic/parameterinfo";

export default {
  props: {
    modifyObj: { type: Object, required: true },
    isAdd: { type: Boolean, required: true, default: false },
  },
  setup(props, context) {
    onMounted(() => {
      // getCssource();
      pageData.formData = {
        fParamCode: "",
        fParamName: "",
        ParamFrom: "",
        fParamType: "",
        fParamValueID: "",
        fParamValue: "",
        fFullName: "",
        fCreatorTime: "",
        fRemark: "",
        fDdcId:'',
      };
      if (!props.isAdd) {
        getData(props.modifyObj);
      }
    });

    // 表单绑定返回的数据
    const csForm = ref();

    const pageData = reactive({
      // 参数ID
      csID: [],
      // 参数来源
      csSource: [
        {
          value: "0",
          label: "字典",
        },
        {
          value: "10",
          label: "员工",
        },
        {
          value: "20",
          label: "组织机构",
        },
      ],
      // 参数类型
      csType: [
        {
          value: "1",
          label: "字符串",
        },
        {
          value: "2",
          label: "整数",
        },
        {
          value: "3",
          label: "小数",
        },
        {
          value: "4",
          label: "日期",
        },
      ],
      formData: {},
      formRules: {
        fParamCode: [
          { required: true, message: "请输入参数编号", trigger: "blur" },
        ],
        fParamName: [
          { required: true, message: "请输入参数名称", trigger: "blur" },
        ],
        fParamFrom: [
          { required: true, message: "请选择来源", trigger: "blur" },
        ],
        fParamType: [
          { required: true, message: "请选择类型", trigger: "blur" },
        ],
        fParamValueID: [
          { required: true, message: "请选择类型", trigger: "blur" },
        ],
        fParamValue: [
          { required: true, message: "请选择类型", trigger: "blur" },
        ],
      },
      isAdd: props.isAdd,
    });

    // 选择参数来源
    const selectParamFrom = (val) => {
      // console.log("val", val);
      select_csSourceFw(val)
        .then((res) => {
          console.log("参数来源res", res);
          pageData.csID = res;
          console.log("pageData.csID", pageData.csID);
        })
        .catch((error) => {
          console.log("error1", error);
        });
    };
    // 选择参数ID
    const selectParamValueID = (val) => {
      console.log("val", val);
      let csitem = pageData.csID.filter((item, index) => {
        return item.name == val;
      });
      pageData.formData.fParamValueID = csitem[0].code;
      pageData.formData.fParamFromId = csitem[0].fId;
    };

    const onHandleCancel = () => {
      csForm.value?.resetFields();
      context.emit("cancel");
    };
    const onHandleSure = () => {
      csForm.value?.validate((valid) => {
        if (valid) {
          const loading = ElLoading.service({
            lock: true,
            background: "rgba(0, 0, 0, 0.7)",
          });
          if (props.isAdd) {
            create_csinfo(pageData.formData)
              .then((res) => {
                console.log("新增参数信息接口返回的数据", res);
                if (res.msg === "参数编号已存在") {
                  ElMessage.error("该参数编号已经存在,请重新输入");
                } else if (res.msg === "参数名称已存在") {
                  ElMessage.error("该参数名称已经存在,请重新输入");
                } else {
                  loading.close();
                  context.emit("ok", {
                    isAdd: props.isAdd,
                    retObj: pageData.formData,
                  });
                }
              })
              .catch((error) => {
                loading.close();
                ElMessage.error(error.message || "请求出错");
              });
          } else {
            pageData.formData.fCreatorTime = new Date(
              pageData.formData.fCreatorTime
            );

            update_csinfo(pageData.formData)
              .then((res) => {
                console.log("first编辑", pageData.formData);

                console.log("参数编辑", res);
                loading.close();
                context.emit("ok", {
                  isAdd: props.isAdd,
                  retObj: pageData.formData,
                });
              })
              .catch((error) => {
                loading.close();
                ElMessage.error(error.message || "请求出错");
              });
          }
        } else return false;
      });
    };

    const getData = (item) => {
      console.log("item", item);
      query_csinfodetails(item.fId)
        .then((res) => {
          console.log("121212", res);
          pageData.formData = res;
          
        })
        .catch((error) => {
          ElMessage.error(error.message || "请求出错");
        });
    };

    return {
      csForm,
      pageData,
      selectParamFrom,
      selectParamValueID,
      onHandleCancel,
      onHandleSure,
    };
  },
};
</script>

<style lang="scss">
.edit_box {
  height: 100%;
  background-color: white;
  .csForm {
    width: calc(100% - 6px);
  }
}
</style>
